<template>
    <div class="menu-chat">
        <div class="menu-title"><span class="act">chat{{ layouts.getTxt }}</span></div>            
        <cb-button class="add-btn">
            <span class="txt"><i class="bi bi-plus"></i> 新建一个会话</span>
        </cb-button>
        <div class="menu-lists" :class="data.inscroll ? 'scroll': '' " @scroll="listScroll">

            <div class="menu-item"
                 :class="isActive(chat) ? 'active' : ''"
                 v-for="(chat, index) in data.menus">
                <span class="title" @click="changeActive(chat.code, chat)">{{ chat.title }}</span>
                <div class="menu-item-detail">
                    <span>{{ chat.model }}</span>
                    <span>{{ chat.frequency }} chat</span>
                    <span>{{ chat.tokens }} token</span>
                </div>
                <div class="btns">
                    <cb-button @click="settingChat(chat)" style="color:gray;" min><i class="bi bi-gear"></i></cb-button>
                    <cb-button style="color:gray;" min menus>
                        <i class="bi bi-three-dots"></i>
                        <cb-menu>
                            <cb-menu-item>
                                <i class="bi bi-box-arrow-left"></i>  导出为...
                            </cb-menu-item>
                            <cb-menu-item>
                                <i class="bi bi-box-arrow-right"></i>  导入...
                            </cb-menu-item>
                            <cb-menu-item>
                                <i class="bi bi-reply-all"></i>  分享给
                            </cb-menu-item>
                            <cb-menu-line></cb-menu-line>
                            <cb-menu-item>
                                <i class="bi bi-trash"></i>  删除
                            </cb-menu-item>
                        </cb-menu>
                    </cb-button>
                </div>
            </div>
            
        </div>
        
        <cb-dialog mask ref="settingDialog" style="width:40%;height:60%;" @close="data.setting=null" :chat-data="data.setting">
            <template v-slot:header>
                <div> {{ data.setting.title }} - setting</div>
            </template>
            <div>
                Content
            </div>
            <template v-slot:footer>
                <div>Footer</div>
            </template>
        </cb-dialog> 
    </div>
</template>

<script setup>
import { reactive, ref, computed, toRef, watch } from 'vue'
import { useLayoutStore } from '@frontend/stores/pinia/layoutStore'
// import { cbMenu, cbMenuItem, cbMenuGround } from '@frontend/components/wights'
import { useRouter } from 'vue-router';

const settingDialog = ref(null)
const layouts = useLayoutStore()
const props = defineProps(['menuData'])

const data = reactive({ 
    current: {
        code: '',
        tab: ''
    },
    tabAndChat:{},
    setting: null,
    inscroll: false,
    menus: []
})

watch( ()=> layouts.getActiveSysBar , (n, o)=>{
    if(n){
        window.exchanger
            .putInvoke('get-sys-bars-subs', n.id )
            .then( (subs) => {
                data.menus = subs
            })
    }
    data.menus = []
})

const isActive = (chat)=>{
    const active = layouts.getActiveTabVo
    let flg = true
    flg = flg && data.tabAndChat[active.name]===chat.code
// console.log('isAcitve:', data.tabAndChat[active.name], chat.code, flg)
    return flg
}

const changeActive = (code, chat)=>{
    const active = layouts.getActiveTabVo
    chat.route = '/chat/'+code
    const p = chat
    layouts.updateActiveTab( p ) 
    data.current.code = code
    data.current.tab = active ? active.name : ''
    data.tabAndChat[active.name] = code
}

let timer = null
const listScroll = (e)=>{
    console.log('scroll', e)
    const target = e.target
    let roll = target.scrollTop;
    data.inscroll = true;
    // 每次滑动前都清除一遍我们定义的定时器
    clearTimeout(timer);
    timer = setTimeout(()=>{
        const top = target.scrollTop;
        if( top == roll){
            data.inscroll = false;
        }
    }, 300);
}

const settingChat = (chat) => {
    settingDialog.value.open()
    data.setting = chat
}
</script>

<style lang="scss" scoped>
.menu-chat{
    display: flex;
    flex-flow: column;
    height: 100%;
}
.add-btn{
    font-size: .8rem;
    // margin-bottom: 10px;
    width: 96%;
    margin: auto;
    .txt{
        margin-left:-23px;
    }
}
.menu-title{
    background:$wk-color;
    height:18px;
    // margin-left:-10px;
    // margin-right:-10px;
    // margin-top:-10px;
    font-size: .7rem;
    text-align: center;
    line-height:18px;
    .act{
        color:#7c7c7c;
    }
}
.menu-lists{
    padding: 10px;
    font-size: 0.8rem;
    flex-grow: 1;
    overflow: auto;
    &::-webkit-scrollbar{
        opacity: 0;
        transition-property: display,opacity, width;
        transition-duration:.3s;
        width: 0;
        height:0;
    }
}

.menu-lists.scroll{
    &::-webkit-scrollbar{
        display: unset;
        opacity: 1;
        width: 8px;
        height:8px;
    }
}

.menu-item{
    position: relative;
    padding: 8px 6px;    
    border: 1px solid $bd-color-normal;
    border-radius: 3px;
    margin-bottom: 10px;
    .title{
        cursor: pointer;
        color: unset;
        &:hover{
            text-decoration: unset;
        }
    }
    .menu-item-detail{
        font-size:.7rem;
        color:$ft-dart-color;
        span{
            margin-right:5px; 
        }
    }
    .btns{
        display: block;
        position:absolute;
        right: 3px;
        top: 7px;
    }
    &:hover:not(.active){
        border-color: $bd-color-active;
        color: $ft-act-color;
    }
    &.active{
        background: $bg-color;
        color: $ft-act-color;
        margin-right: 5px;
        &::after{
            display: block;
            position: absolute;
            content: ".";
            text-indent: -999em;
            width: 0;
            height: 0;
            border-left: 12px solid $bg-color;
            border-top: 26px solid transparent;
            border-bottom: 26px solid transparent;
            /* background-color: red; */
            right: -12px;
            top: 0;
        }
    }
}
</style>